/* eslint-disable max-len */
/* eslint-disable no-multiple-empty-lines */
/* eslint-disable prettier/prettier */

import React, { PureComponent } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, Alert, Image } from 'react-native';
import { Divider, Utils, TYFlatList, Popup, TopBar } from 'tuya-panel-kit';
import TYSdk from '../../api';
import dpCodes from '../../config/dpCodes';
import Strings from '../../i18n';
import Res from '../../res';



class HelpListScene extends PureComponent {
  
  constructor(props) {
    super(props);
    this.state = {
      showTop: true,
    };
  }

  topView() {
    return (
      <TopBar.Container
        background="#FFFFFF"
        style={{ height: TopBar.height }}
        contentStyle={{ height: TopBar.height, marginTop: 10 }}
      >
        <TopBar.Action size={20} source={Res.fback} color="#4C4C4C" onPress={() => TYSdk.Navigator.pop()} />
        <TopBar.Content />
      </TopBar.Container>
    );
  }

  render() {
    const { showTop } = this.state;
    return (
      <View style={[styles.container, { backgroundColor: '#FFFFFF' }]}>
        { showTop ? this.topView() : null }
        {/* 使用帮助 */}
        <View style={{ backgroundColor: '#FFFFFF', height: 100, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <Text style={{ marginStart: 20, fontSize: 30, color: '#333333' }}>{Strings.list_item_use_help}</Text>
        </View>

        <TYFlatList
          style={{
            alignSelf: 'stretch',
            backgroundColor: '#f5f5f5',
            height: 280,
            marginStart: 20,
            marginEnd: 20,
          }}
          separatorStyle={{ backgroundColor: '#FFFFFF' }}
          scrollEnabled={false}
          data={data}
        />

        <View style={styles.spliceline}>
          <Divider style={{ alignSelf: 'center' }} color="#E5E5E5" width="80%" />
        </View>
        {/* 水泵日常维护及故障排查 */}
        <View style={{ backgroundColor: '#FFFFFF', height: 50, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <Text style={{ marginStart: 35, fontSize: 12, color: '#333333' }}>{Strings.list_group_pump_title}</Text>
        </View>

        <TYFlatList
          style={{
            alignSelf: 'stretch',
            backgroundColor: '#FFFFFF',
            height: 600,
            marginStart: 20,
            marginEnd: 20,
          }}
          separatorStyle={{ backgroundColor: '#FFFFFF' }}
          scrollEnabled={false}
          disabled={true}
          data={help}
        />
      </View>
    );
  }

}



let data = [
  {
    key: 0,
    title: Strings.list_item_fish_ready_title,//'养鱼筹备',
    arrow: true,
    // styles: { content: { marginStart: 20, marginEnd: 40 } },
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'help',
        helpValue: 1,
      });
    },
  },
  {
    key: 1,
    title: Strings.list_item_open_tank_guide_title,//'开缸指导',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'help',
        helpValue: 2,
      });
    },
  },
  {
    key: 2,
    title: Strings.list_item_fish_culture_title,//'养鱼小知识',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'help',
        helpValue: 3,
      });
    },
  },
  {
    key: 3,
    title: Strings.list_item_fish_tank_keep_title,//'鱼缸维护',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'help',
        helpValue: 4,
      });
    },
  },
];

let help = [
  {
    key: 0,
    title: Strings.list_item_how_clean_pump_title,//'如何清洁水泵？',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'errorList',
        errorValue: 25,
      });
    },
    // styles: { content: { marginStart: 20, marginEnd: 40 } },
  },
  {
    key: 1,
    title: Strings.list_item_how_deal_with_no_water_noice_empty_running_title,//'如果水泵不出水、有异响或空转怎么办？',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'errorList',
        errorValue: 22,
      });
    },
  },
  {
    key: 2,
    title: Strings.list_item_how_deal_with_pump_no_work_title,//'如果水泵不工作怎么办？',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'errorList',
        errorValue: 23,
      });
    },
  },
  {
    key: 3,
    title: Strings.list_item_how_deal_with_e1_title,//'如果显示E1-水泵低水位怎么办？',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'errorList',
        errorValue: 4,
      });
    },
  },
  {
    key: 4,
    title: Strings.list_item_how_deal_with_e2_title,//'如果显示E2-水泵堵转怎么办？',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'errorList',
        errorValue: 8,
      });
    },
  },
  {
    key: 5,
    title: Strings.list_item_how_deal_with_e3_title,//'如果显示E3-水泵故障怎么办？',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'errorList',
        errorValue: 2,
      });
    },
  },
  {
    key: 6,
    title: Strings.list_item_how_deal_with_e4_title,//'如果显示E4-温度探头故障怎么办？',
    arrow: true,
    onPress: () => {
      TYSdk.Navigator.push({
        id: 'errorList',
        errorValue: 24,
      });
    },
  },

];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f4f4f4',
  },
  spliceline: {
    backgroundColor: 'white',
    height: 28,
    justifyContent: 'center',
  },

});

export default HelpListScene;
